<template>
  <div class="wrap">
    <a-table
      :dataSource="dataList"
      :columns="columns"
      rowKey="id"
      :pagination="false"
    >
    <template #imgList="{ record }">
        <a v-for="item in record.imgList"
            :href="item.url"
            target="_blank"
          ><img
            style="width: 50px; height: 50px; margin: 5px"
            :src="item.url"
            alt=""
        /></a>
      </template>
    </a-table>
    <!-- <div class="page">
      <a-pagination
        v-model:current="current"
        v-model:pageSize="pageParams.rowsize"
        :total="total"
        show-less-items
        show-size-changer
        @showSizeChange="onShowSizeChange"
        @change="onChange"
      />
    </div> -->
  </div>
</template>

<script>
import {
  h,
  ref,
  toRefs,
  reactive,
  onMounted,
  computed,
  watch,
  createVNode,
} from "vue";
import utils from "@/utils/utils";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import Service from "@/api/service";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

export default {
  setup() {
    const state = reactive({
      dataList: [],
      columns: [
        {
          title: "id",
          dataIndex: "id",
        },
        {
          title: "姓名",
          dataIndex: "username",
        },
        {
          title: "标题",
          dataIndex: "title",
        },
        {
          title: "内容",
          dataIndex: "content",
          ellipsis: true,
        },
        {
          title: "图片",
          dataIndex: "imgList",
          slots: {
            title: "imgList",
            customRender: "imgList",
          },
        },
        {
          title: "发布时间",
          dataIndex: "createTime",
        }
      ],
      current: 1,
      pageParams: {
        pageno: 1,
        rowsize: 10,
      },
      total: 1,
    });

    const getDataList = async () => {
      const { body } = await Service.getLeaderboard(state.pageParams);
      console.log(body);
      body.forEach((item) => {
        item.createTime = utils.formatDate(item.createTime);
        let imgList = [];
        for (let i = 1; i < item.photoFilesNums + 1; i++) {
          let obj = {};
          obj.url = `http://47.107.66.57:8080/images/DiscussPost/${item.id}/${i}.jpg`;
          imgList.push(obj);
        }
        item.imgList = imgList;
      });
      state.dataList = body;
    };
    onMounted(async () => {
      getDataList();
    });
    const onShowSizeChange = async (current, pageSize) => {
      state.pageParams.pageno = 1;
      state.pageParams.rowsize = pageSize;
      getDataList();
    };
    const onChange = async (pageNumber) => {
      state.pageParams.pageno = pageNumber;
      getDataList();
    };
    const del = async (id) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确定删除吗?",
        okText: () => "确定",
        okType: "danger",
        cancelText: () => "取消",

        async onOk() {
          const res = await Service.delDiscussPost({ id: id });
          if (res.status == "1") {
            message.success("删除成功");
            getDataList();
          }
        },

        onCancel() {},
      });
    };
    return {
      ...toRefs(state),
      del,
      onShowSizeChange,
      onChange,
    };
  },
};
</script>

<style lang='less' scoped>
.wrap {
  position: relative;
}
.page {
  // position: absolute;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
</style>
